<template>
  <div class="declaration-menu">
    <div class="declaration-container">
      <div class="declaration-tabs">
        <div class="tabs-scroll">
          <div class="item" :class="type == 'all' ? 'active' : ''" @click="type = 'all'">流程消息<span class="font_family icon-gengduo"></span></div>
          <div class="item" v-for="(item, index) in menuList" :key="index" :class="type == item.type ? 'active' : ''" @click="type = item.type">{{ item.label }}<span class="font_family icon-gengduo"></span></div>
        </div>
      </div>
      <div class="tabs-menu">
        <div class="tabs-first-list">
          <div class="item">一级分类</div>
          <div class="item">一级分类</div>
          <div class="item">一级分类</div>
          <div class="item">一级分类</div>
        </div>
        <div class="tabs-second-list">
          <!-- 可以滚动 -->
          <div class="item">当前分类</div>
          <div class="item">当前分类</div>
          <div class="item">当前分类</div>
          <div class="item">当前分类</div>
          <div class="item">当前分类</div>
          <div class="item">当前分类</div>
          <div class="item">当前分类</div>
          <div class="item">当前分类</div>
          <div class="item">当前分类</div>
          <div class="item">当前分类</div>
        </div>
      </div>
      <div class="tabs-btn">
        <div class="btn btn-type01">重置</div>
        <div class="btn btn-type02">确认</div>
      </div>
    </div>
    <transition name="declaration-mask">
      <div class="declaration-mask"></div>
    </transition>
  </div>
</template>
<script>
export default {
  data() {
    return {
      menuList: [
        { type: 'type1', label: '消息类别1' },
        { type: 'type2', label: '消息类别2' },
        { type: 'type3', label: '消息类别3' },
        { type: 'type3', label: '消息类别3' },
        { type: 'type3', label: '消息类别3' },
      ],
    }
  },
}
</script>
<style lang="less" scoped>
.declaration-menu {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: calc(60px + env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, 0.7);
  padding-top: 50px;
  .declaration-container {
    background: #fff;
    // TODO
    z-index: 10;
  }
  // declaration-tabs
  .declaration-tabs {
    width: 100vw;
    overflow-y: scroll;
    .tabs-scroll {
      width: auto;
      white-space: nowrap;
    }
    .item {
      display: inline-block;
      text-align: center;
      line-height: 40px;
      font-size: 13px;
      color: #313541;
      margin: 0 15px;
      span {
        display: inline-block;
        font-weight: normal;
        transform: rotate(90deg);
        margin-left: 3px;
      }
      &.active {
        font-size: 14px;
        font-weight: bold;
        position: relative;
        color: #009966;
        &:after {
          position: absolute;
          content: '';
          left: 50%;
          bottom: 0;
          width: 20px;
          height: 1px;
          margin-left: -10px;
          background: #009966;
        }
      }
    }
  }
  .tabs-menu {
    display: flex;
    height: 300px;
    border-top: 1px solid rgba(242, 242, 242, 1);
    border-bottom: 1px solid rgba(242, 242, 242, 1);
    overflow: hidden;
    .tabs-first-list {
      width: 100px;
      padding-left: 15px;
      overflow-y: auto;
      .item {
        height: 40px;
        line-height: 40px;
        font-size: 12px;
        color: rgba(49, 53, 65, 1);
        border-bottom: 1px solid rgba(242, 242, 242, 1);
      }
    }
    .tabs-second-list {
      flex: 1;
      padding-left: 10px;
      border-left: 1px solid rgba(242, 242, 242, 1);
      overflow-y: auto;
      .item {
        height: 40px;
        line-height: 40px;
        font-size: 12px;
        color: rgba(49, 53, 65, 1);
        border-bottom: 1px solid rgba(242, 242, 242, 1);
      }
    }
  }
  .tabs-btn {
    display: flex;
    padding: 15px;
    .btn {
      flex: 1;
      height: 34px;
      line-height: 34px;
      text-align: center;
      border: 1px solid rgba(143, 146, 160, 1);
      border-radius: 5px;
      font-size: 14px;
      color: rgba(49, 53, 65, 1);
      &.btn-type01 {
        margin-right: 8px;
      }
      &.btn-type02 {
        margin-left: 8px;
        color: #fff;
        background: rgba(0, 153, 102, 1);
        border: 1px solid rgba(0, 153, 102, 1);
      }
    }
  }
  .declaration-mask {
    // position: fixed;
    // left: 0;
    // right: 0;
    // top: 0;
    // bottom: calc(60px + env(safe-area-inset-bottom));
    // background: rgba(0,0,0,0.7);
  }
}
.declaration-mask-enter-active, .declaration-mask-leave-active {
  transition: opacity .5s;
}
.declaration-mask-enter, .declaration-mask-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>